<template>
  <view class="root">
    <view class="top-bg">
    </view>
    <view class="top-box">
      <scroll-view class="step-wrapper" :scroll-x="true" :scroll-left="scrollX" :style="{height: scrollHeight + 'px'}">
        <view class="scroll-inner" id="scroll-inner">
          <view class="step-item" v-for="(item, index) in examineIdItems" :key="index">
            <view class="circle" :class="{'actived': index === active}" v-if="index < active">
              <u-icon name="checkbox-mark" color="#2488F5"></u-icon>
            </view>
            <view class="circle" :class="{'actived': index === active}" v-else>
              {{index + 1}}
            </view>
            <view class="dot" :class="{'actived': index === active -1}">
              <view class="i-dot"></view>
              <view class="i-dot"></view>
              <view class="i-dot"></view>
              <view class="i-dot"></view>
            </view>
            <view class="text" :class="{'actived': index === active}" :style="{'font-size': '24rpx'}">
              {{item.examineCategoryName}}
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="check-item-container">
        <view v-for="(item, i) in examineIdItems" :key="i" class="check-inner-container" v-show="active === i">
          <view class="check-item" v-for="(innerItem, index) in item.inspectionItemsSonVos" :key="innerItem.id">
            <view class="check-label">
              {{`${innerItem.sortOrder}.${innerItem.industryExamineDetailName}`}}
              <image @click="handleProblem(innerItem.regulationsVos)" class="problem-img"
                :src="baseImgUrl + 'problem-icon.png'">
              </image>
            </view>
            <view class="check-item-box">
              <u-radio-group v-model="radiovalue[i][index].value" placement="row"
                @change="(name) => handleRadioChange(name, i, index)">
                <u-radio label="是" :name="1" label-size="36rpx">
                </u-radio>
                <u-radio label="否" :name="0" label-size="36rpx">
                </u-radio>
                <u-radio label="不涉及" :name="2" label-size="36rpx" v-if="innerItem.noInvolveStatus === 1">
                </u-radio>
              </u-radio-group>
              <view class="improve-wrapper" v-if="radiovalue[i][index].value === 0 && (
                !_get(evidenceList, `[${i}][${index}].value`, undefined) &&
                !_get(evidenceList, `[${i}][${index}].imgUrl`, []).length
                )" @click="handleImprove(i, index)">
                <image class="i-icon-l" :src="baseImgUrl + 'evidence-icon.png'"></image>
                <view class="i-text">完善证据</view>
              </view>
              <view class="improve-wrapper" v-if="radiovalue[i][index].value === 0 &&
                (_get(evidenceList, `[${i}][${index}].value`, undefined) ||
                _get(evidenceList, `[${i}][${index}].imgUrl`, []).length)
                " @click="handleEditImprove(i, index)">
                <image class="i-icon-l" :src="baseImgUrl + 'evidence-edit.png'"></image>
                <view class="i-text">编辑证据</view>
              </view>
            </view>
            <u-line></u-line>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-wrapper">
      <!-- 如果只有一个的时候 -->
      <template v-if="examineIdItems.length === 1">
        <u-button class="custom-style" text="提交" @click="handleSubmit" :custom-style="customSubmitStyleFull"></u-button>
      </template>
      <template v-else>
        <u-button v-if="active === 0" class="custom-style" text="下一步" @click="handleNext"
          :custom-style="customSubmitStyleFull"></u-button>
        <template v-if="active > 0 && active < examineIdItems.length - 1">
          <u-button class="custom-style" text="上一步" @click="handlePrev"
            :custom-style="customSubmitStylePrev"></u-button>
          <u-button class="custom-style" text="下一步" @click="handleNext"
            :custom-style="customSubmitStyleFull"></u-button>
        </template>
        <template v-if="active === examineIdItems.length - 1">
          <u-button class="custom-style" text="上一步" @click="handlePrev"
            :custom-style="customSubmitStylePrev"></u-button>
          <u-button class="custom-style" text="提交" @click="handleSubmit"
            :custom-style="customSubmitStyleFull"></u-button>
        </template>
      </template>
    </view>

    <u-popup :show="show" mode="center" @close="close" @open="open" :round="8">
      <view class="problem-wrapper">
        <view class="l-title">
          <yy-title title="法律依据："></yy-title>
        </view>
        <view class="l-content">
          <view class="p-item" v-for="item in regulationsVos" :key="item">
            <view class="l-name">
              {{`《${item.regulationsName}》`}}
            </view>
            <view class="l-text" v-html="item.regulationsArticleNo + ' '+ item.regulationsArticleContent">
            </view>
          </view>
        </view>
        <view class="l-know" @click="show = false">
          我知道了
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    getInspectionItems
  } from '../api/api'
  import {
    Toast,
    customSubmitStyleFull,
    customSubmitStylePrev,
    getOptionsParams,
    isLoading,
    navTo
  } from '@/utils/util.js'
  import _ from '@/utils/lodash.js'

  const _get = _.get
  import {
    mapState
  } from 'vuex'

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        customSubmitStyleFull,
        customSubmitStylePrev,
        active: 0,
        // 证据列表
        show: false,
        scrollX: 0,
        routerParams: {},
        examineIdItems: [],
        regulationsVos: {},
        scrollHeight: 0
      }
    },
    computed: {
      ...mapState(['radiovalue', 'evidenceList'])
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      uni.$on('add-evidence', (data) => {
        const {
          outerIndex,
          innerIndex,
          value
        } = data
        // 如果有一个有值的话
        // 设置证明数据
        let cloneEvidenceList = _.cloneDeep(this.evidenceList)
        cloneEvidenceList[outerIndex][innerIndex] = value
        this.$store.commit('INIT_EVIDENCE_LIST', cloneEvidenceList)
      })
      this.initData()
    },
    onUnload() {
      uni.$off('add-evidence')
    },
    methods: {
      _get,
      handlePrev() {
        if (this.active <= 0) {
          return
        }
        this.active--
      },
      handleNext() {
        if (this.active >= this.examineIdItems.length - 1) {
          return
        }
        this.active++
      },
      handleSubmit() {
        // 提交的时候判断是否合格，如果合格，则跳转到合格页面否则跳转到不合格页面
        console.log(this.radiovalue)
        // 找到是的
        let unquelified = this.radiovalue.flat().find(item => item.value === 0)
        // 不合格
        if (unquelified) {
          navTo({
            url: '/venueInspection/checkDoneUnqualified',
            params: this.routerParams
          })
        } else {
          navTo({
            url: '/venueInspection/checkDone',
            params: this.routerParams
          })
        }
      },
      close() {
        this.show = false
      },
      open() {
        this.show = true
      },
      handleImprove(outerIndex, innerIndex) {
        navTo({
          url: '/venueInspection/improveEvidence',
          params: {
            outerIndex,
            innerIndex
          }
        })
      },
      handleRadioChange(name, outerIndex, innerIndex) {
        console.log(outerIndex, innerIndex, this.evidenceList)
        // 删除
        if (name == 1) {
          // let cloneEvidenceList = _.cloneDeep(this.evidenceList)
          // cloneEvidenceList[outerIndex].splice(innerIndex, 1)
          // this.$store.commit('INIT_EVIDENCE_LIST', cloneEvidenceList)
        } else {
          navTo({
            url: '/venueInspection/improveEvidence',
            params: {
              outerIndex,
              innerIndex,
              improveContent: this.$store.state.evidenceList[outerIndex][innerIndex]
            }
          })
        }
      },
      handleEditImprove(outerIndex, innerIndex) {
        navTo({
          url: '/venueInspection/improveEvidence',
          params: {
            outerIndex,
            innerIndex,
            improveContent: this.$store.state.evidenceList[outerIndex][innerIndex]
          }
        })
      },
      initData() {
        isLoading(true)
        getInspectionItems({
            examineId: this.routerParams.checkId
          })
          .then((res) => {
            if (res.code == 200) {
              this.examineIdItems = res.result
              this.$store.commit('SET_EXAMINE_ID_ITEMS', res.result)
              // 生成一个二维数组
              let radiovalueTemp = []
              let evidenceListTemp = []
              res.result.forEach((item) => {
                // 添加新的数组进去
                const defaultValue = []
                item.inspectionItemsSonVos.forEach((item) => {
                  defaultValue.push({
                    value: 1,
                    id: item.id
                  })
                })
                radiovalueTemp.push(defaultValue)
                evidenceListTemp.push([])
              })
              // 初始化提交 state
              this.$store.commit('INIT_RADIOVALUE', radiovalueTemp)
              this.$store.commit('INIT_EVIDENCE_LIST', evidenceListTemp)
              this.getDivHeightAfterUpdate()
            } else {
              Toast(res.message)
            }
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleProblem(regulationsVos) {
        this.regulationsVos = {
          ...regulationsVos
        }
        this.show = true
      },
      getDivHeightAfterUpdate() {
        this.$nextTick(() => {
          const query = uni.createSelectorQuery()
          query.select('#scroll-inner').boundingClientRect((data) => {
            this.scrollHeight = data.height
          }).exec()
        })
      }
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;

    .top-bg {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      height: 322rpx;
      background: #2488F5;
    }

    .top-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 0;

      /deep/.step-wrapper {
        padding-top: 40rpx;
        padding-bottom: 40rpx;
      }

      .check-item-container {
        flex: 1;
        height: 0;
        z-index: 10;
        padding: 0 22rpx 13rpx 22rpx;

        .check-inner-container {
          width: 100%;
          height: 100%;
          overflow: auto;
          background: #FFFFFF;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          padding: 57rpx 25rpx 40rpx 25rpx;

          .check-item {
            padding-bottom: 31rpx;

            /deep/.u-radio-group--row {
              padding-top: 17rpx;
              padding-bottom: 17rpx;

              .u-radio {
                margin-right: 136rpx;
              }

              view:nth-last-child(1) {
                margin-right: 0;
              }
            }

            .check-item-box {
              display: flex;
              align-items: center;
            }

            .improve-wrapper {
              font-weight: 400;
              font-size: 24rpx;
              color: #A2A2A2;
              padding: 10rpx;
              display: flex;
              align-items: center;

              .i-icon-l {
                width: 20rpx;
                height: 24rpx;
                margin-right: 6rpx;
              }

              .i-text {
                line-height: 1;
              }
            }

            .check-label {
              font-weight: 500;
              font-size: 26rpx;
              color: #A2A2A2;
              display: block;
              align-items: center;
              overflow: hidden;
              overflow-wrap: break-word;

              .problem-img {
                width: 36rpx;
                height: 36rpx;
                margin-left: 6rpx;
                flex-shrink: 0;
                display: inline-block;
                vertical-align: middle;
              }
            }

            .u-radio-group {
              margin-top: 16rpx;
              margin-bottom: 16rpx;
              padding-left: 12rpx;
            }

            .u-radio {
              margin-right: 136rpx;
            }
          }
        }
      }

      .step-wrapper {
        width: 100%;
        display: flex;
        white-space: nowrap;
        min-height: 140rpx;

        .step-item {
          flex: 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: relative;
          width: 200rpx;

          .dot {
            position: absolute;
            top: 23rpx;
            right: -40rpx;
            display: flex;
            opacity: 0.6;

            .i-dot {
              width: 10rpx;
              height: 10rpx;
              background: #FFFFFF;
              margin-right: 8rpx;
              border-radius: 50%;
            }
          }

          .actived {
            opacity: 1 !important;
          }

          &:last-of-type {
            .dot {
              display: none;
            }
          }

          .circle {
            width: 56rpx;
            height: 56rpx;
            background: #FFFFFF;
            margin-bottom: 19rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #2488F5;
            opacity: 0.6;
          }

          .text {
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            opacity: 0.6;
            text-align: center;
            width: 108rpx;
            white-space: normal;
          }
        }
      }
    }

    .bottom-wrapper {
      width: 100%;
      height: 120rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 34rpx;
    }

    .problem-wrapper {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      overflow: hidden;

      .l-title {
        height: 96rpx;
        background: #E9F4FF;
        padding-left: 40rpx;
      }

      .l-content {
        height: 523rpx;
        overflow: auto;
        padding: 40rpx;

        .p-item {
          margin-bottom: 33rpx;

          .l-name {
            font-weight: 500;
            font-size: 26rpx;
            color: #536598;
            margin-bottom: 23rpx;
          }

          .l-text {
            font-weight: 500;
            font-size: 26rpx;
            color: #666666;
            line-height: 44rpx;
            padding-left: 16rpx;
            position: relative;

            &:before {
              position: absolute;
              content: '';
              width: 10rpx;
              height: 10rpx;
              background: #BBBBBB;
              left: 0;
              top: 17rpx;
              border-radius: 50%;
            }
          }
        }
      }

      .l-know {
        font-weight: 500;
        font-size: 36rpx;
        color: #2488F5;
        line-height: 42rpx;
        text-align: center;
        font-style: normal;
        text-decoration-line: underline;
        margin-bottom: 69rpx;
        padding-top: 42rpx;
      }
    }

    /deep/ .u-popup {
      flex: unset;
    }
  }
</style>